<template>
	<view class="login-bg absolute top-0">
		<!-- <image class="absolute top-0" style="width: 750rpx;" src="/static/image/login-top2.png" mode="widthFix"></image> -->
		<view class="login-page">
			<view class="flex flex-row border-b-4 border-indigo-500 relative">
				<view class="image-content">
					<image style="width: 150rpx; " src="/static/image/eletile-logo.png" mode="widthFix"></image>
				</view>
				<view class="login-langType" style="width:400rpx;">
					<view class="tag" v-for="(item, index) in cates" :key="index"
						:class="langIndex == index ? 'select' : 'noSelect'" :circle="true" :text="item"
						@click="switchLanguage(index)">{{ item }}
					</view>
				</view>
				<view class="title mx-4  flex flex-col justify-around ">
					<text class="title-tip font">IBPM {{ $t('calendar.login') }}</text>
					<text class="title-desc ">👏{{ $t('calendar.welcome') }} <text class="italic">IBPM</text>
						{{ $t('calendar.platform') }}</text>
				</view>
			</view>

			<view class="pt-12">
				<input class="login-input" v-model="data.userName" type="text"
					:placeholder="$t('placeholder.loginUser')" clearable />
				<input class="login-input" password v-model="data.password" type="text"
					:placeholder="$t('placeholder.passwordEnter')" clearable />
			</view>

			<button type="primary" class="mt-10 bg-cyan-500 shadow-lg shadow-blue-500/50"
				style="border-radius: 100rpx;background-color: #3d7eff;" @click="chooseUser">
				{{ $t('calendar.login') }}</button>
			<view class="opration mt-10">
				<label>
					<checkbox style="transform: scale(0.8);" activeBackgroundColor="#4478F7" iconColor="#ffffff"
						value="cb" checked="true" />
					{{ $t('placeholder.rememberMe') }}
				</label>
				<text>{{ $t('placeholder.forgot') }}</text>
			</view>
			<!-- <view class="other-login">
     			 <text>其他方式登录</text>
			</view>
			<view class="login-type">
			<image class="img" src="/static/qqlogin.png" mode="aspectFit"></image>
			<image class="img" src="/static/wxlogin.png" mode="aspectFit"></image>
			</view> -->
			<org-picker ref="orgPicker" showNav :multiple="false" type="user" :selected="loginUser ? [loginUser] : null"
				@ok="selectOk"></org-picker>
		</view>
	</view>
	<!-- <image class="absolute bottom-0" style="width: 750rpx;" src="/static/image/login_bottom_bg.jpg" mode="widthFix"></image> -->
</template>

<script setup>
import { login, loginPage } from '@/api/org.js'
import OrgPicker from '@/components/OrgPicker.vue'
import { onMounted, ref, reactive, computed } from 'vue';
import { getLang } from '@/locale/index';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const orgPicker = ref()
const loginUser = ref(null)
const loginParams = ref({
	username: '',
	password: ''
})
// 多语言切换的
let langIndex = ref();
let langTypes = ["zh-Hans", "en", "es"]
let cates = computed(() => {
	return [t('login.simplified'), t('login.english'), t('login.esglish')]
})

const data = reactive({
	userName: '',
	password: ''
})

onMounted(() => {
	loginUser.value = uni.getStorageSync('loginUser')
	if (loginUser.value) {
		uni.switchTab({
			url: '/pages/submit/submit'
		})
	}
	let langType = uni.getLocale()
	langIndex.value = langTypes.findIndex(x => x == langType)
})

function doLogin(userId) {
	loginPage({
		username: data.userName,
		password: data.password
	}).then(rsp => {
		console.log('rsp.data', rsp.data)
		rsp.data.deptName = rsp.data.position
		//登录信息设置到本地
		uni.setStorageSync('loginUser', rsp.data)
		uni.setStorageSync('wflow-token', rsp.data.token)
		uni.showToast({
			title: t('webAuto.Welcome') + rsp.data.userName,
			icon: 'success'
		})
		uni.reLaunch({
			url: '/pages/submit/submit'
		})
	}).catch(err => {
		uni.showToast({
			title: t('placeholder.failure'),
			icon: 'error'
		})
	})
}

function selectOk(users) {
	loginUser.value = users[0]
	orgPicker.value.close()
	doLogin(loginUser.value.id)
}

//演示系统选择登录的用户
function chooseUser() {
	// orgPicker.value.show()
	// uni.showToast({ title: '请选择要体验的用户', icon: 'none' })
	console.log(data)
	if (data.password == '' || data.userName == '') {
		uni.showToast({
			title: t('placeholder.account'),
			icon: 'none'
		})
		return
	} else {
		doLogin(data.userName)
	}
}

// 语言切换
function switchLanguage(index) {
	console.log(index)
	langIndex.value = index
	let type = langTypes[index];
	// #ifdef APP-PLUS
	if (isAndroid) {
		uni.showModal({
			content: t('login.language-change-confirm'),
			success: (res) => {
				if (res.confirm) {
					langIndex.value = index
					getLang(type)
				}
			}
		})
	} else {
		langIndex.value = index
		getLang(type)
	}
	// #endif
	// #ifndef APP-PLUS
	getLang(type)
	langIndex.value = index
	// #endif
}
</script>

<style lang="less">
page {
	background-color: white !important;
}

.login-bg {
	background-image: url('../../static/login-top2.png');
	background-size: 120% 120%;
	height: 100%;
	width: 100%;
}

.login-page {
	padding: 250rpx 32rpx;

	.title {

		//padding: 256rpx 0 96rpx 0;
		.title-tip {
			@apply font-sans text-amber-900 font-black;
			display: block;
			// color: #373E60;
			color: rgba(0, 0, 0, 0.9);
			font-size: 50rpx;
			font-weight: 600;
		}

		.title-desc {
			@apply text-slate-300;
			font-weight: 500;
			//color: #959595;
			font-size: 30rpx;
		}
	}

	.login-input {
		font-size: 32rpx;
		padding: 25.6rpx 48rpx;
		background-color: #F7F8F9;
		border-radius: 13rpx;
		margin: 32rpx 0;
		width: calc(100% - 96rpx);
	}

	.opration {
		display: flex;
		margin-bottom: 32rpx;
		justify-content: space-between;
		align-items: center;
		color: #4478F7;
	}

	.other-login {
		margin: 128rpx 0;
		width: 100%;
		height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #878787;
		color: #878787;

		text {
			background-color: white;
			padding: 0 5px;
		}
	}

	.login-type {
		display: flex;
		justify-content: center;
		align-items: center;

		.img:first-child {
			width: 90rpx;
			height: 90rpx;
		}

		.img {
			margin: 0 32rpx;
			width: 80rpx;
			height: 80rpx;
		}
	}
}

.login-langType {
	position: absolute;
	top: -240rpx;
	left: -20rpx;
	display: flex;
	line-height: 70rpx;
	flex-direction: row;
}

.select {
	width: 100rpx;
	height: 70rpx;
	color: #fff;
	font-weight: 500;
	background-color: #008AFF !important;
	text-align: center;
	border-radius: 1.25rem;
}

.noSelect {
	width: 100rpx;
	height: 70rpx;
	font-weight: 500;
	text-align: center;
}
</style>